<template>
    <!-- <div class="app-footer"> -->
        <div id="menu">
            <ul>
                <!-- <li><a href="index.html" class="red"><font class="iconfont">&#xe612;</font><span class="inco_txt">首页</span></a></li> -->
                <li>
					<router-link to="/home" tag="a" >
						<font class="iconfont">&#xe612;</font><span class="inco_txt">首页</span>
					</router-link>		
				</li>
                <li>
					<router-link to="/list" tag="a">
						<font class="iconfont">&#xe660;</font><span class="inco_txt">分类</span>
					</router-link>
				</li>
                <li>
					<router-link to="/cart" tag="a">
						<font class="iconfont index">&#xe63e;</font><span class="inco_txt">购物车</span>
					</router-link>
				</li>
                <li>
					<router-link to="/user" tag="a">
						<font class="iconfont">&#xe62e;</font><span class="inco_txt">我的</span>
					</router-link>
				</li>
            </ul>
        </div> 
    <!-- </div> -->
</template>
<style>
#menu ul li a.router-link-active{color:#ed3341;}

#menu{
	width: 100%;
	height: 44px;
	position: fixed;
	left: 0px;
	bottom: 0px;
	background: #fff;
	box-shadow: 0 -3px 5px #ccc;
	z-index: 1000;
}
#menu ul{
	width: 100%;
}
#menu ul li{
	width: 25%;
	float: left;
}
#menu ul li a{
	width: 57px;
	height: 44px;
	margin: 0 auto;
	text-align: center;
	color: #494949;
	-webkit-transition: .3s color;
	transition: .3s color;
}
#menu ul li a.red{
	color: #ed3341;
	-webkit-transition: .3s color;
	transition: .3s color;
}
#menu ul li a font.iconfont{
	font-size: 18px;
	line-height: 32px;
}
#menu ul li a font.index{
	font-size: 21px;
}
#menu ul li a span{
	display: block;
	line-height: 8px;
}
</style>
